<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>用户管理</BreadcrumbItem>
      <BreadcrumbItem>用户充值详情</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Button type="default" @click="$router.go('-1')">返回</Button>
      </FormItem>
      <br>
      <FormItem>
        商品名称: <Input type="text" style="width:200px;" placeholder="请输入商品名称"></Input>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="goDel(row.order_id, row.id)"
            v-hasPermission="['39']"
          >删除
          </Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="goDel(row.order_id, row.id)"
            v-hasPermission="['39']"
          >禁用
          </Button
          >
        </template>
      </Table>
    </div>
    <!--    分页标记-->
    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        checkbox: []
      },
      params: {
        device_time: [],
        status: 2,
        user_id: '',
        order_id: '',
        activity_id: '',
        page: 1,
        limit: 10
      },
      total: 0,
      height: this.$store.state.height,
      page: {},
      data1: [
        {
          id: 1,
          title: '机器组3'
        },
        {
          id: 2,
          title: '机器组4'
        }
      ],
      request: {
        device_number: '',
        p: 1
      },
      columns1: [
        {
          title: '用户充值方式',
          key: 'bank_name',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户充值金额',
          key: 'money',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户充值时间',
          key: 'create_time',
          minWidth: 150,
          align: 'center'
        }
      ],
      tableData: [],
      uid: ''
    }
  },
  created () {
    this.uid = this.$route.query.id
    this.getInvestlist()
    // this.rechargeLog()
  },
  methods: {
    // 获取充值记录列表
    getInvestlist () {
      this.loading = true
      this.axios.post('user/rechargeLog', { id: this.uid }).then(res => {
        if (res.code === 1) {
          this.loading = false
          this.tableData = res.data.list
          this.page.count = res.data.count // 总条数
          this.page.curPage = res.data.curPage // 当前页
          this.page.countPage = res.data.countPage // 总页数
        }
      })
    },
    timechange (val) {
      console.log(val)
    },
    confirm () {
      this.modal1 = false
      this.$Message.success('保存成功！')
      this.cancel()
    },
    goDel (id, ids) {
      this.$router.push({ path: '/order/abnormalDetail', query: { id, ids } })
    },
    setStatus (id, status) {
      var text = '确定要' + (status === 1 ? '启用' : '禁用') + '此机器组么？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success('操作成功')
        },
        onCancel: () => {
        }
      })
    },
    handleSizeChange (val) {
      this.request.page = 1
      this.request.limit = val
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.init()
    },
    //  ---------------------------- axios -------------------
    /**
     * 用户充值记录
     */
    rechargeLog () {
      this.axios.create({
        method: 'get',
        params: this.$qs.stringify({ id: this.uid }),
        url: 'user/rechargeLog',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      })
    }
  }
}
</script>

<style></style>
